<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <Home></Home>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">

                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-link href="">设置</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link type="success" href="/fee">刷新</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link type="danger" href="/login">退出</el-link>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>桑尼酒店</span>
                </el-header>



                <el-main>
                    <el-form>
                        <el-table
                                :data="tableData"
                                :show-header="true"
                                border
                                style="width: 100%">
                            <el-table-column
                                    fixed
                                    prop="id"
                                    label="序号"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.id"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.id}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="direct"
                                    label="退费or缴费"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.direct"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.direct}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="coustomerName"
                                    label="客户姓名"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.coustomerName"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.coustomerName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="houseId"
                                    label="房间号"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.houseId"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.houseId}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="money"
                                    label="金额"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.money"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.money}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="allMoney"
                                    label="消费总金额"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.allMoney"></el-input>
                                    <span v-show="!scope.row.show" style="margin-left: 10px">{{scope.row.allMoney}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="startTime"
                                    label="开始时间"
                                    width="240">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.startTime"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.startTime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="endTime"
                                    label="结束时间"
                                    width="240">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.endTime"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.endTime}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="相关说明"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.description"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.description}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="feeType"
                                    label="支付方式"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="scope.row.show"
                                              v-model="scope.row.feeType"></el-input>
                                    <span v-show="!scope.row.show"
                                          style="margin-left: 10px">{{scope.row.feeType}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="150">
                                <template slot-scope="scope">
                                    <el-button @click="edit(scope.row,scope.$index)" type="text">
                                        {{scope.row.show?'':""}}<i
                                            class="el-icon-s-order"></i></el-button>

                                    <el-button @click="handleClick(scope.$index, scope.row)" type="text"><i
                                            class="el-icon-s-unfold"></i></el-button>

                                    <el-button @click="checkOut(scope.$index, scope.row)" type="text"><i
                                            class="el-icon-printer"></i>
                                    </el-button>
<!--                                    //空闲房间-->
                                    <el-button type="text" v-if="scope.row.state===0" size="mini" round>
                                        <i class="el-icon-star-off"></i>
                                    </el-button>
<!--                                    //已订-->
                                    <el-button type="success" v-if="scope.row.state===1" size="mini" round>
                                        <i class="el-icon-star-off"></i>
                                    </el-button>
<!--                                    //已住-->
                                    <el-button type="warning" v-if="scope.row.state===2" size="mini" round>
                                        <i class="el-icon-star-off"></i>
                                    </el-button>
<!--                                    //时间到了但没退-->
                                    <el-button type="danger" v-if="scope.row.state===3" size="mini" round>
                                        <i class="el-icon-star-off"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
        <div>
            <el-pagination class="feepage"
                           background
                           layout="prev, pager, next"
                           @size-change="handleSizeChange"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :total="total"
                           @current-change=page>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Home from "../../components/Home"

    export default {
        name: "Fee.vue",
        components: {Home},
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
            },

            queryFee() {
                const _this = this
                _this.$axios.get('/fee/feePage').then(res => {
                    // console.log("11111" + JSON.parse(res.request.response).data.records[0].id)
                    // 将数据传入tableData
                    _this.tableData = JSON.parse(res.request.response).data.records
                    _this.feePage = res.data.data.records

                    console.log(_this.tableData)
                }).catch(function (err) {
                    console.log(err)
                });
            },

            edit(row, index) {
                row.show = !row.show
                // console.log("feeedit"+JSON.stringify(this.feePage))
                // console.log("tableData"+JSON.stringify(this.tableData))
                const _this = this

                _this.$axios.post('/fee/edit', _this.tableData[index], {
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                })
            },


            handleClick(row, index) {
                const _this = this
                _this.$axios.get('/fee/feePage').then(res => {
                    _this.$axios.post('/fee/updata/' + JSON.parse(res.request.response).data.records[row].id).then(res => {
                        // console.log("666"+JSON.parse(res.request.response).data.records[row].id)
                        // _this.$router.push("/fee")
                        //刷新页面
                        location.reload()
                    }).catch(function (err) {
                        console.log(err)
                    });
                })
            },

            page(currentPage) {
                const _this = this
                _this.$axios.get('/fee/feePage?currentPage=' + currentPage).then(res => {
                    // console.log(res)
                    // console.log(JSON.parse(res.request.response).data.records)
                    // console.log(JSON.parse(res.request.response).data.records[0].id)
                    _this.feePage = res.data.data.records
                    _this.currentPage = res.data.data.current
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size

                    // console.log("feepage" + _this.feePage[0].id)
                    //分页拿到数据重新赋值渲染页面
                    _this.tableData = JSON.parse(res.request.response).data.records
                })
            },


            checkOut(row) {
                const _this = this
                _this.$axios.get('/fee/feePage').then(res => {
                    this.$router.push("/FeePrint/" + JSON.parse(res.request.response).data.records[row].id);
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },

        data() {
            return {
                feePage: {},
                currentPage: 1,
                total: 0,
                pageSize: 5,

                tableData: [],
            }
        },
        created() {
            this.page(1)
            this.queryFee()

            //修改数据
            const _this = this
            _this.$axios.get('/fee/feePage').then(res => {
                // console.log("11111" + JSON.parse(res.request.response).data.records[0].id)
                // 将数据传入tableData
                let list = JSON.parse(res.request.response).data.records

                let listSave = res.data.data.records
                list.forEach(element => {
                    element["show"] = false
                });
                _this.tableData = list
                _this.feePage = listSave
                // console.log("修改：" + _this.feePage[0].money)
            }).catch(function (err) {
                console.log(err)
            });
        }
    }
</script>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .feepage {
        margin: 0 auto;
        text-align: center;
    }

    .fee {
        color: darkred;
        float: left;
    }
</style>

